<template>
	<div class="table-demo-container layout-padding">
		<div class="table-demo-padding layout-padding-view layout-padding-auto">
			<!-- <TableSearch :search="state.tableData.search" @search="onSearch" @addRow="onTableEditRow" /> -->
			<div style="display: flex;height: 100%;">
				<div class="menu-left" style="display: flex;flex-direction: column;">
					<div style="padding-bottom: 5px;border-bottom: 1px dashed rgba(0, 0, 0, .1);"> <el-button
							style="font-size: 14px !important;padding: 7px 11px !important;" size="small" type="success" @click="onTableEditRow">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							{{ $t('message.btnName.addRow') }}
						</el-button></div>
					<div style="margin-top: 5px;">
						<fast-tree-component :treeData="treeState.treeData" :treeProps="treeProps"
							@selectedCode="selectedCode" @getTreeMenus="getTreeMenus"></fast-tree-component>
					</div>
				</div>

				<div style="display: flex;flex-direction: column;flex: 1;">
					<div class="head" :style="headComputed" v-loading="treeState.treeFloorLoading">
						<div class="title" style="font-size: 18px;"> <span style="font-weight: 900;">区域名称：</span> {{
							treeState.treeName }}</div>

						<div class="content" ref="contentRef" style="overflow-y: auto;"
							v-if="treeState.treeFloorList?.length > 0">
							<!-- 每栋楼 -->
							<div style="display: flex;justify-content: space-around; padding: 10px 0 10px 30px;">
								<div class="floorWarp" v-for="item in treeState.treeFloorList" style="margin-right: 46px;">
									<!-- <div class="floor" v-for="(data, index) in item.children">
									<div class="title" :class="data.active ? 'open' : 'close'">{{ `F${index + 1}` }}</div>
									<div class="img"><img src="../../../assets/电梯1.png" alt=""></div>
								</div> -->
									<!-- 每层楼 -->
									<div class="cube" v-for="(data, index) in item.devices">
										<div class="face front" style="display: flex;justify-content: space-between;">
											<div style="padding-top: 5px;" :class="data?.status ? 'open' : 'close'">F{{
												item?.floorTotal - index
											}}</div>
											<div class="container">
												<div class="box">
													<div class="lineUp"></div>
												</div>
												<div class="box">
													<div class="lineDown"></div>
												</div>
											</div>
										</div>
										<div class="face back"></div>
										<div class="face top"></div>
										<div class="face bottom"></div>
									</div>
								</div>
							</div>
						</div>
						<div v-else style="font-size: 16px;">暂无单元楼</div>
					</div>
					<div style="font-size: 18px;font-weight: 900;padding: 5px 10px;font-weight: 900;">异常事件：</div>

					<div style="width: 100%;overflow-y: auto;height: 40%;">
						<el-table size="small" :data="state.tableData.data" style="height: 100%;" border>
							<el-table-column prop="devCode" label="设备编号" />
							<el-table-column prop="devName" label="设备名称" />
							<el-table-column prop="employeeCode" label="工号" />
							<el-table-column prop="employeeName" label="姓名" />
							<el-table-column prop="eventTime" label="异常时间" />
						</el-table>
					</div>
					<div style="margin-top: 20px;">
						<el-pagination v-model:current-page="state.tableData.param.pageNum"
							v-model:page-size="state.tableData.param.pageSize" :pager-count="5" :page-sizes="[10, 20, 30]"
							:total="state.tableData.config.total" layout="total, sizes, prev, pager, next, jumper"
							background @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange">
						</el-pagination>
					</div>

				</div>
			</div>
			<editComponent ref="dialogRef" @refresh="getTreeMenus()" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, ref, onMounted, provide, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useAccessPointByAreaQueryApi, useAccessPointDeleteApi } from '/@/api/access/point';
import { EmptyObjectType, RefType } from '/@/types/global';
import { computed } from 'vue';
import { useLadderAreaListApi, useLadderAreaPageApi, useLadderAreaQueryApi } from '/@/api/ladder/area';

const dialogRef = ref<RefType>();
const contentRef = ref();
const editComponent = defineAsyncComponent(() => import('./editDialog.vue'));
// 引入组件
const fastTreeComponent = defineAsyncComponent(() => import('/@/views/ladder/area/fastTree/index.vue'));

const treeProps = {
	label: 'name',
	key: 'code',
	children: 'children'
}

const headComputed = computed(() => {
	return {
		height: '55%',
		border: '1px solid #EBEEF5',
		background: `url(data:image/jpg;base64,${treeState.images})`,
		backgroundSize: '100% 100%',
		padding: '5px',
		boxSizing: 'border-box',
		display: 'flex',
		flexDirection: 'column',
		transformStyle: 'preserve-3d'
	}
}) as any

// 定义变量内容
const tableRef = ref<RefType>();
const state = reactive<TableDemoState>({
	tableData: {
		// 列表数据（必传）
		data: [],
		// 表头内容（必传，注意格式
		header: [
			{ key: 'alias', colWidth: '', title: '门名称', type: 'text', isCheck: true, sortable: true },
			{ key: 'deviceCode', colWidth: '', title: '设备序列号', type: 'text', isCheck: true, sortable: true },
			{ key: 'deviceName', colWidth: '', title: '设备名称', type: 'text', isCheck: true, sortable: true },
			{ key: 'inout', colWidth: '', title: '进出方向', type: 'text', isCheck: true, sortable: true },
			{ key: 'areaName', colWidth: '', title: '设备区域', type: 'text', isCheck: true, sortable: true },
		],
		// 配置项（必传）
		config: {
			total: 0, // 列表总数
			loading: true, // loading 加载
			isBorder: true, // 是否显示表格边框
			isSerialNo: false, // 是否显示表格序号
			isSelection: false, // 是否显示表格多选
			isOperate: true, // 是否显示表格操作栏
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
		search: [
			{ label: '门名称', prop: 'alias', placeholder: '请输入门名称', required: false, type: 'input', defaultValue: '' },
			// { label: '设备序列号', prop: 'deviceCode', placeholder: '请输入设备序列号', required: false, type: 'input', defaultValue: '' }
		],
		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
		param: {
			code: '',
			pageNum: 1,
			pageSize: 10,
		},
		// 打印标题
		printName: '打印示例',

	},
});
const treeState = reactive({
	treeData: [] as any,
	images: '' as any,
	treeName: '',
	treeCode: '',
	treeFloorList: [] as any,
	treeFloorLoading: false,
})

// 初始化列表数据
const getTableData = () => {
	useLadderAreaPageApi(state.tableData.param).then(({ content }) => {
		// state.tableData.data = content.list || []
	})
	// 数据总数（模拟，真实从接口取）

};

let timer1: any = null

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};

// 主页面获取树状菜单
const getTreeMenus = () => {
	useLadderAreaListApi().then(({ content }) => {
		treeState.treeData = content
		getImg(treeState.treeData[0].code)
	})

}

provide('getTreeMenus', getTreeMenus)

const getImg = (code: string) => {
	treeState.treeFloorLoading = true
	useLadderAreaQueryApi(code).then(({ content }) => {
		treeState.images = content.image
		treeState.treeName = content.name
		treeState.treeCode = content.code
		treeState.treeFloorLoading = false
		treeState.treeFloorList = content.units || []
	})

}

const getAreaDev = (areaCode: string) => {
	useAccessPointByAreaQueryApi(areaCode).then(({ content }) => {
		treeState.treeFloorList = content
	})
}

// 勾选关联查询table
const selectedCode = (data: any, options: string) => {
	if (options === 'select') {
		getImg(data.code)
		state.tableData.param.areaCode = data.code
		state.tableData.param = Object.assign({}, state.tableData.param);
		getTableData()
		contentRef.value.scrollTop = 1100

	}
	if (options === 'edit') {
		onTableEditRow(data)
	}

}

// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
	// tableRef.value.pageReset();
	getTableData()
};
// 编辑当前项回调
const onTableEditRow = (row: EmptyObjectType) => {
	if (row) {
		dialogRef.value.openDialog(row.code);
	} else {
		dialogRef.value.openDialog();
	}
};
// 页面加载时	
onMounted(() => {

	//初始化slider数据
	useLadderAreaListApi().then(({ content }) => {
		treeState.treeData = content || []
		state.tableData.param.code = treeState.treeData[0].code
		// getTableData();
		// timer1 = setInterval(() => {
		// 	getTableData();
		// }, 1000)
		getImg(treeState.treeData[0].code)
	})
});

onUnmounted(() => {
	clearInterval(timer1)
})

</script>

<style scoped lang="scss">
body {
	perspective: 400px;
}

.table-demo-container {
	.table-demo-padding {
		padding: 15px;

		.table-demo {
			flex: 1;
			overflow: hidden;
		}
	}
}

.menu-left {
	margin-right: 10px;
	overflow-y: auto;
	padding: 0 5px 30px 0;
	min-width: 250px;
}

.floorWarp {
	display: flex;
	flex-direction: column;
	justify-content: end;
	margin-right: 60px;
	box-sizing: border-box;
}

.title {
	flex: 1
}

.floor {
	width: 62px;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	font-size: 12px;
	padding: 0 4px;
	background: rgb(220, 220, 236);
	background: linear-gradient(to bottom, rgba(220, 220, 236, 1) 0%, rgba(247, 247, 247, 1) 33%, rgba(220, 220, 236, 1) 100%);
	display: flex;
	justify-content: space-between;
	border-radius: 3px;
	align-items: center;
	transition: .5s;
	transform-origin: left;

	background: linear-gradient(to right, #0250c5 0%, #d43f8d 25%, #0250c5 50%, #d43f8d 75%, #0250c5 100%);
	background-size: 200% auto;
	animation: move 3s linear infinite;
}

@keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -100% 0;
	}
}

.floor:hover {
	transform: rotateY(20deg);
}

.floor:nth-of-type(1) {
	position: relative;
	border-top: 1px solid #ccc;

}

.img {
	display: flex;
	justify-content: center;
}

.img img {
	height: 100%;
	width: auto;
}

.close {
	color: red;
}

.open {
	color: green;
}


//---------------------
.floorWarp .cube {
	width: 60px;
	height: 71px;
	font-size: 14px;
	font-weight: bold;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-3deg) rotateY(-10deg);
	/* animation: rotateCube 3.5s infinite linear; */
}

@keyframes rotateCube {
	0% {
		transform: rotateX(-4deg) rotateY(-22deg);
	}

	25% {
		transform: rotateX(-8deg) rotateY(-22deg);
	}

	50% {
		transform: rotateX(-8deg) rotateY(-18deg);
	}

	75% {
		transform: rotateX(-6deg) rotateY(-16deg);
	}

	100% {
		transform: rotateX(-4deg) rotateY(-22deg);
	}
}

.floorWarp .face {
	position: absolute;
	width: 90px;
	height: 70px;
	border: 4px solid #2980b9;
	border-radius: 4px;

}

.floorWarp .front {
	border-bottom: 0px solid #2980b9;
	text-indent: .5em;
	transform: translateZ(110px);

}

.floorWarp .back {
	border-bottom: 0px solid #2980b9;
	transform: rotateY(180deg) translateZ(110px);
	background-image: linear-gradient(45deg,
			rgba(255, 238, 0, 0.425) 0%,
			rgba(166, 255, 0, 0.452) 40%,
			rgba(30, 128, 0, 0.356) 70%,
			rgba(209, 255, 101, 0.356) 100%);
	background-size: 200% auto;
	animation: move 4s linear infinite;
	transition: all .5s;
}

.floorWarp .cube .top {
	height: 215px;
	border-bottom: 7px solid #2980b9;
	transform: rotateX(90deg) translateZ(106px);
}

.floorWarp .cube .bottom {
	height: 215px;
	// background-color: #555555;
	border-bottom: 0px solid #2980b9;
	transform: rotateX(-90deg) translateZ(-38px);

	transition: all .5s;
	background: linear-gradient(to right, #5982c0 0%, #5bb894 25%, #7197cf 50%, #60c492 75%, #517fc5 100%);
	background-size: 200% auto;
	animation: move 5s ease-in-out infinite;
}

@keyframes move {
	0% {

		background-position: -100% -100%;
	}

	100% {
		background-position: -200% -200%;
	}
}


.floorWarp .container {
	display: flex;
	align-items: center;
}

.floorWarp .box {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	height: 30px;
	width: 15px;
	border: 1px solid #2980b9;
	margin-right: 1px;
	margin-bottom: 4px;
	overflow: hidden;
}

.floorWarp.front:hover {
	cursor: pointer;
}

/* .front:hover .lineDown {
            animation: lineDown 2.5s linear infinite;
        }

        .front:hover .lineUp {
            animation: lineUp 2.5s linear infinite;
        } */
.floorWarp .box .lineUp {
	animation: lineUp 2.5s linear infinite;
}

.floorWarp .box .lineDown {
	animation: lineDown 2.5s linear infinite;
}

.floorWarp .box .lineUp {
	position: relative;
	width: 1px;
	height: 50%;
	background-color: #000;
}



@keyframes lineUp {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-25px);
	}
}



@keyframes lineDown {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(25px);
	}
}

.floorWarp .box .lineDown {
	position: relative;
	width: 1px;
	height: 50%;
	background-color: #000;
}

.floorWarp .box .lineUp::before {
	position: absolute;
	content: '';
	display: block;
	border-radius: 4px;
	top: 0;
	left: -1px;
	width: 100%;
	height: 50%;
	background-color: #000;
	transform: rotate(30deg);
}

.floorWarp .box .lineUp::after {
	position: absolute;
	content: '';
	display: block;
	border-radius: 4px;
	top: 0;
	left: 1px;
	width: 100%;
	height: 50%;
	background-color: #000;
	transform: rotate(-30deg);
}

.floorWarp .box .lineDown::before {
	position: absolute;
	content: '';
	display: block;
	border-radius: 4px;
	bottom: 0;
	left: -1px;
	width: 100%;
	height: 50%;
	background-color: #000;
	transform: rotate(150deg);
}

.floorWarp .box .lineDown::after {
	position: absolute;
	content: '';
	display: block;
	border-radius: 4px;
	bottom: 0;
	left: 1px;
	width: 100%;
	height: 50%;
	background-color: #000;
	transform: rotate(-150deg);
}

:deep(.el-tree-node__content) {
	margin-top: 5px;
}

// .content {
// 	background: linear-gradient(to right, #0250c5 0%, #d43f8d 25%, #0250c5 50%, #d43f8d 75%, #0250c5 100%);
// 	background-size: 200% auto;
// 	animation: move 3s linear infinite;
// }

// @keyframes move {
// 	0% {
// 		background-position: 0 0;
// 	}

// 	100% {
// 		background-position: -100% 0;
// 	}
// }
</style>
